<template>
	<view class="main">
		<!-- <view class="mian-fuwufei" v-if="userpaytype==4"><text>本次限免（不收取服务费）生效中...</text></view> -->
		<view class="fabu-number-people">
			<text class="fabu-number-people-title-text">发布人数（人）</text>
			<text class="fabu-number-people-text">{{number}}</text>
			<view class="fabu-number-people-service-charge-view">
				<text class="fabu-number-people-service-charge-text">服务费5元/人</text>
				<image class="fabu-number-people-service-charge-image" src="http://images.linglinggong.net/static/wgc_icon/we23r3244r32432.png"
					mode="aspectFill" @click="ShowModel(2)"></image>
			</view>
			<!-- <view>
				<text
					class="fabu-number-people-title-text">体验卡抵用（人）</text>
				<text class="fabu-number-people-text" style="color: #FE4B28;">-{{upObj.number}}</text>
				<view class="fabu-number-people-service-charge-view">
				
				</view>
			</view> -->
			<view class="fabu-number-people-service-charge-view-line"></view>
			<view class="fabu-number-people-service-charge-text-view">
				<text class="xiaoji">小计丨{{isSelect.length}}*{{5}}元<text id="zongji">{{0}}</text>元</text>
			</view>
		</view>
		<view class="fabu-zhifu-button-view">
			<view class="fabu-zhifu-button-view-text">
				<!-- 总计<text>{{isBuyYk?MonthCard_list[isShowYkType].Price:serviceCharge*num}}</text>元 -->
				总计<text>0</text>元
			</view>
			<view class="fabu-zhifu-button-view-button" @click="ykButton">立即支付</view>
		</view>
		<view class="mask" v-if="isShowmodel">
			<view class="chengyijin-model">
				<view class="chengyijin-model-image">{{isShowmodelType==1?'诚意金':isShowmodelType==2?'服务费':'直通卡'}}</view>
				<view class="chengyijin-model-title">
					<text>{{isShowmodelType==1?'什么是诚意金？':isShowmodelType==2?'什么是服务费？':'什么是直通卡？'}}</text>
				</view>
				<view v-if="isShowmodelType==1">
					<view class="chengyijin-model-view-text">
						<!-- <text>● </text> -->诚意金是保障雇员的权益与用户所产生的约定费用
					</view>
					<view class="chengyijin-model-view-text">
						<!-- <text>● </text> -->诚意金会根据任务节点，可抵扣工人工资或原路返还
					</view>
				</view>
				<view v-if="isShowmodelType==2">
					<view class="chengyijin-model-view-text">
						<!-- <text>● </text> -->如没有招募到雇员，服务费会原路返还
					</view>
					<view class="chengyijin-model-view-text">
						<!-- <text>● </text> -->为提高服务质量，同时兼顾平台可持续健康发展
					</view>
				</view>
				<view v-if="isShowmodelType==3">
					<view class="chengyijin-model-view-text">直通卡是一种限时类活动卡片，购买直通卡后发布任务可进行对应的服务费免除</view>
					<view class="chengyijin-model-title"><text>直通卡的种类有哪些？</text></view>
					<view class="chengyijin-model-view-text">直通卡包括：月卡、半年卡、年卡</view>
				</view>
				<view class="chengyijin-model-button" @click="isShowmodel=false">知道了</view>
			</view>
		</view>
	</view>
</template>
<script>
	import unit from '@/libs/newUnit.js'
	import Voice from '@/libs/QS-baiduyy.js'
	import {
		he_evaluate_lv,
		get_user_status
	} from '../../../libs/unit.js'
	export default {
		data() {
			return {
				upObj: {},
				isShowmodel: false,
				taskId: 0,
				startTime: '',
				endTime: '',
				isSelect: [],
				num: '',
				isShowmodelType: 1, //1 诚意金 2 服务费 3 月卡
				priorityPushFlag: '',
				number: ''
			}
		},
		onLoad(value) {
			if (uni.getStorageSync('checked1')) {
				Voice('完单邀请已通过，无需支付任何费用')
			}
			console.log(value)
			this.isSelect = JSON.parse(value.tempArr)
			console.log(this.isSelect)
			this.taskId = value.taskId
			this.startTime = value.startTime
			this.endTime = value.endTime
			this.number = value.number
			this.priorityPushFlag = value.priorityPushFlag
			// console.log(this.num)
			// console.log('是否体验卡用户：'+this.ykName)
		},
		methods: {
			async ykButton() {
				// let storageTaskId = uni.getStorageSync('release_task_invitation') ? uni.getStorageSync(
				// 	'release_task_invitation') : {}
				// if (!Object.keys(storageTaskId).includes(this.taskId)) {
				unit.release_task_invitation(this.taskId, this.startTime, this.endTime, this.number, this
					.priorityPushFlag).then(v => {
					if (v) {
						if (this.isSelect.length) {
							// uni.$emit('closeZdyVoice',{})
							unit.invitation_order(this.isSelect, v.id, this.taskId)
							uni.showToast({
								title: '发布成功',
								icon: 'none'
							})
							Voice('完单邀请已通过，无需支付任何费用')
						} else {
							uni.showToast({
								title: '发布成功',
								icon: 'none'
							})
						}
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/my-job/boss-my-job-new'
							})
						}, 2000)
					}
				})
				// } else {
				// 	unit.invitation_order(this.userid, storageTaskId[this.taskId], this.taskId)
				// 	uni.showToast({
				// 		title: '邀请成功',
				// 		icon: 'none'
				// 	})
				// }
			},
			ShowModel(isShowmodelType) {
				isShowmodelType = isShowmodelType == 4 ? 1 : isShowmodelType
				this.isShowmodel = true
				this.isShowmodelType = isShowmodelType
			},
		}
	}
</script>
<style lang="less" scoped>
	.main {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 30rpx;
	}

	.marginTop20 {
		margin-top: 20rpx;
	}

	.fabu-number-people {
		width: 690rpx;
		// height: 244rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
	}

	.fabu-money {
		width: 690rpx;
		height: 264rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		.marginTop20;
	}

	.fabu-zhifu-type {
		width: 690rpx;
		height: 324rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		.marginTop20;
	}

	.fabu-number-people-title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		line-height: 45rpx;
		display: inline-block;
		margin: 36rpx 0 0 30rpx;
	}

	.fabu-number-people-text {
		font-size: 40rpx;
		font-weight: bold;
		color: #000000;
		line-height: 45rpx;
		float: right;
		display: inline-block;
		margin: 36rpx 30rpx 0 0;
	}

	.fabu-number-people-service-charge-view {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.fabu-number-people-service-charge-text {
		font-size: 24rpx;
		font-weight: 500;
		color: #515151;
		line-height: 45rpx;
		margin-left: 30rpx;
		display: inline-block;
	}

	.fabu-number-people-service-charge-image {
		width: 42rpx;
		height: 42rpx;
	}

	.fabu-number-people-service-charge-view-line {
		width: 630rpx;
		height: 1rpx;
		background: #F2F2F2;
		margin: 34rpx auto 30rpx auto;
	}

	.fabu-number-people-service-charge-text-view {
		float: right;
		margin-right: 30rpx;
		padding-bottom: 30rpx;

		.xiaoji {
			font-size: 26rpx;
			font-weight: 600;
			color: #515151;
			line-height: 24rpx;
		}

		#zongji {
			font-size: 52rpx;
			color: #FE4B28;
			margin-left: 8rpx;
			margin-right: 8rpx;
		}
	}

	.fabu-money-right-image {
		background-image: url(http://images.linglinggong.net/static/icon3/fdtyu76899.png);
		background-size: cover;
		width: 246rpx;
		height: 44rpx;
		float: right;

		&>text {
			font-size: 24rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 44rpx;
			float: right;
			margin-right: 30rpx;
		}
	}

	.month-card-info-title {
		margin-top: 32rpx;
		margin-left: 28rpx;
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		line-height: 45rpx;
	}

	.month-card-info-introduce {
		margin-top: 32rpx;
		margin-left: 28rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #515151;
		line-height: 41rpx;
		float: left;
	}

	.fabu-money-right-item {
		float: right;
		margin: 32rpx 30rpx 0 0;
	}

	.fabu-money-right-item-money-view {
		display: flex;
		flex-direction: row;

		&>text:nth-child(1) {
			font-size: 66rpx;
			font-weight: bold;
			color: #FE4B28;
			line-height: 42rpx;
		}

		&>text:nth-child(2) {
			font-size: 24rpx;
			font-weight: 500;
			color: #515151;
			line-height: 66rpx;
			margin-right: 30rpx;
		}
	}

	.payItem {
		width: 630rpx;
		height: 60rpx;
		margin: 36rpx auto;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&>image {
			width: 60rpx;
			height: 60rpx;
		}

		&>text {
			font-size: 26rpx;
			font-weight: 500;
			color: #000000;
			line-height: 36rpx;
			margin-left: 20rpx;
			flex: 1;
		}

		.yueText {
			font-size: 26rpx;
			font-weight: 500;
			color: #A5A5A5;
			line-height: 45rpx;
			margin-left: 20rpx;
		}
	}

	.select {
		width: 42rpx;
		height: 42rpx;
		border: 1rpx solid #AFAFAF;
		border-radius: 50%;
	}

	.selected {
		width: 46rpx;
		height: 46rpx;
		background-image: url(http://images.linglinggong.net/static/icon1/hdg.png);
		background-repeat: repeat;
		background-size: 100% 100%;
	}

	.mask {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		position: fixed;
		left: 0;
		top: 0;
	}

	.chengyijin-model {
		width: 630rpx;
		height: 565rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.chengyijin-model-image {
		width: 402rpx;
		height: 92rpx;
		position: relative;
		left: calc(50% - 201rpx);
		top: -32rpx;
		background-image: url(http://images.linglinggong.net/static/icon3/haopinginfo.png);
		background-size: cover;
		font-size: 40rpx;
		text-align: center;
		font-weight: bold;
		color: #402110;
		line-height: 92rpx;
	}

	.chengyijin-model-title {
		display: inline-block;
		height: 44rpx;
		margin-left: 48rpx;
		background-color: rgba(252, 201, 40, .2);
		border-radius: 22rpx;

		&>text {
			padding: 0 24rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #F39A16;
			text-align: center;
			line-height: 44rpx;
		}
	}

	.chengyijin-model-view-text {
		width: 534rpx;
		margin: 30rpx auto 0 auto;
		color: #515151;
		font-size: 30rpx;
		line-height: 50rpx;
		margin-bottom: 34rpx;

		&>text {
			font-size: 16rpx;
			color: #FCC928;
		}
	}

	.chengyijin-model-button {
		width: 534rpx;
		height: 78rpx;
		background: #FCC928;
		border-radius: 8rpx;
		text-align: center;
		font-size: 32rpx;
		line-height: 78rpx;
		font-weight: bold;
		color: #402110;
		margin: 0 auto;
	}

	.fabu-zhifu-button-view {
		width: 750rpx;
		height: 138rpx;
		background-color: #FFFFFF;
		position: fixed;
		padding-bottom: 30rpx;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.fabu-zhifu-button-view-text {
		font-size: 28rpx;
		font-weight: 400;
		color: #000000;
		margin-left: 30rpx;

		&>text {
			font-size: 52rpx;
			font-weight: bold;
			color: #FE4B28;
		}
	}

	.fabu-zhifu-button-view-button {
		margin-right: 30rpx;
		width: 220rpx;
		height: 88rpx;
		background: #FCC928;
		border-radius: 12rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #402110;
		line-height: 88rpx;
	}

	.share-modal {
		z-index: 11;
		position: fixed;
		bottom: 0;
		height: 100vh;
		width: 100vw;
		background-color: rgba(0, 0, 0, 0.40);
		display: flex;
		align-items: center;
		justify-content: center;

		&>.main {
			// border: 2rpx solid #000000;
			position: relative;
			top: -100rpx;
			width: 570rpx;
			height: 250rpx;
			padding: 30rpx;
			background: #FFFFFF;
			box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05) inset;
			border-radius: 17px;
			line-height: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			&>.modal-title {
				font-size: 17px;
				margin: 30rpx 0 50rpx;

				&>.imgs {
					position: relative;

					image {
						position: absolute;
						top: 0rpx;
						bottom: 0;
						right: -80rpx;
						width: 50rpx;
						height: 40rpx;
					}
				}
			}

			&>.pay-code {
				// border: 2rpx solid #000000;
				padding-bottom: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				//flex-wrap: wrap;
				position: relative;

				&>input {
					position: absolute;
					top: 0;
					left: -100%;
					width: 200%;
					height: 100%;
					text-align: left;
					z-index: 9;
					opacity: 1;
					// border: 1px solid #000000;
				}

				&>.box {
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					width: 80rpx;
					height: 80rpx;
					margin-right: 10rpx;
					font-size: 22px;
					line-height: 90rpx;
					box-sizing: border-box;
					background-color: #F2F2F2;
					border-radius: 2px;

					&:last-child {
						margin-right: 0;
					}
				}

				&>.active {
					border: 2rpx solid #cccccc;

					@keyframes twinkling {
						0% {
							opacity: 0.1;
						}

						50% {
							opacity: 0.8;
						}

						100% {
							opacity: 0.1;
						}
					}

					&>.line {
						display: block;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						width: 2upx;
						height: 40upx;
						background: #333333;
						animation: twinkling 1s infinite ease;
					}
				}
			}

			.repwd {
				height: 40rpx;
				margin-bottom: -40rpx;
				font-size: 24rpx;
				color: #FE4B28;
			}

			&>.button {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180rpx;
				height: 70rpx;
				margin-top: 60rpx;
				border-radius: 50rpx;
				background-color: #FCC928;

				&:active {
					opacity: 0.7;
				}
			}

			&>.close {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				width: 42rpx;
				height: 42rpx;
			}
		}
	}

	.errorpw {
		animation: swing 1s .15s linear 1;
	}

	@keyframes swing {

		10%,
		90% {
			transform: translate(-4rpx, 0);
		}

		20%,
		80% {
			transform: translate(+4rpx, 0);
		}

		30%,
		70% {
			transform: translate(-6rpx, 0);
		}

		40%,
		60% {
			transform: translate(+6rpx, 0);
		}

		50% {
			transform: translate(-8rpx, 0);
		}
	}

	.month-card-info-right-youhui {
		width: 260rpx;
		height: 28rpx;
		background-color: rgba(254, 74, 40, .2);
		border-radius: 4rpx;
		margin-right: 100rpx;
		line-height: 28rpx;
		font-size: 24rpx;
		margin-top: 12rpx;
		font-weight: 500;
		color: #FE4B28;
		position: absolute;
		right: 0rpx;

		&>image {
			width: 22rpx;
			height: 22rpx;
			position: relative;
			margin: 0 12rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.mian-fuwufei {
		width: 690rpx;
		height: 80rpx;
		background: #6ED4B5;
		border-radius: 12rpx;
		margin-bottom: -20rpx;

		&>text {
			margin-left: 30rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 60rpx;
		}
	}

	.yk-jianmian {
		// width: 440rpx;
		// height: 286rpx;
		// background-color: rgba(0, 0, 0, .6);
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .8);
		border-radius: 12rpx;
		position: fixed;
		top: 0;
		left: 0;
		// top: 50%;
		// left: 50%;
		// transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		&>image {
			width: 104rpx;
			height: 104rpx;
			margin-top: 40rpx;
		}
	}

	.yk-jianmian-title {
		margin-top: 28rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 46rpx;
	}

	.yk-jianmian-cardNumber {
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 50rpx;
	}

	.showYkJianmianTime {
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 120rpx;
	}
</style>
